import React from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'echarts-for-react';
import themes from '@/theme';
import increment from '@/assets/list_up_icon_default.png';
import decrement from '@/assets/list_fall_icon_default.png';

const dealOption = (option, legendExtra) => {
    const tmpOption = {
        color: themes,
        textStyle: {
            fontSize: 14
        },
        ...option
    };
    if (option.legend) {
        tmpOption.legend = {
            selectedMode: false,
            textStyle: {
                lineHeight: 20
            },
            ...option.legend
        };
    }
    if (tmpOption.legend && tmpOption.legend.show !== false) {
        tmpOption.legend.itemWidth = 8;
        tmpOption.legend.itemHeight = 8;

        const textStyle = {
            padding: [6, 4],
            fontSize: 14,
            ...tmpOption.legend.textStyle,
            rich: {
                name: {
                    padding: [0, 5, 0, 0]
                },
                border: {
                    width: 1,
                    height: 14,
                    backgroundColor: '#D9D9D9'
                },
                extra_decrement: {
                    width: 8,
                    height: 6,
                    lineHeight: 14,
                    backgroundColor: {
                        image: decrement
                    }
                },
                extra_increment: {
                    width: 8,
                    height: 6,
                    lineHeight: 14,
                    backgroundColor: {
                        image: increment
                    }
                },
                extra_1_decrement: {
                    color: '#FF4D4F',
                    fontSize: 14,
                    padding: [0, 0, 0, 5]
                },
                extra_1_increment: {
                    color: 'rgba(0,0,0,.45)',
                    fontSize: 14,
                    padding: [0, 0, 0, 5]
                },
                ...(tmpOption.legend.textStyle &&
                    tmpOption.legend.textStyle.rich)
            }
        };
        if (legendExtra.length > 0) {
            tmpOption.legend.formatter = name => {
                const arr = [
                    `{name|${name}}`,
                    '{border|}'
                    // `{extra_0|${legendExtra[0](name, tmpOption)}}`
                ];

                // eslint-disable-next-line array-callback-return
                legendExtra.map((extra, index) => {
                    const result = extra(name, tmpOption);

                    if (result && result.type) {
                        if (
                            result.type !== 'increment' &&
                            result.type !== 'decrement'
                        ) {
                            throw new Error(
                                '`type`只能返回`increment`或者`decrement`!'
                            );
                        }
                        const { type, value = 0 } = result;
                        // arr.push(`{extra_${type}|}`);
                        arr.push(`{extra_1_${type}|${value}}`);
                    } else if (result && typeof result.value !== 'undefined') {
                        const { value = 0 } = result;

                        arr.push(`{extra_${index}|${value}}`);
                    } else {
                        arr.push(`{extra_${index}|${result}}`);
                    }
                });

                return arr.join(' ');
            };
            // eslint-disable-next-line array-callback-return
            legendExtra.map((extra, index) => {
                // eslint-disable-next-line array-callback-return
                tmpOption.legend.data.map(la => {
                    const result = extra(la, tmpOption);

                    if (result && result.type) {
                        textStyle.rich[`extra_1_${result.type}`] = {
                            ...textStyle.rich[`extra_1_${result.type}`],
                            ...result.style
                        };
                    } else if (result && result.style) {
                        textStyle.rich[`extra_${index}`] = result.style;
                    } else {
                        textStyle.rich[`extra_${index}`] = {
                            padding: [0, 12, 0, 12],
                            fontSize: 14,
                            color: 'rgba(0, 0, 0, 0.45)'
                        };
                    }
                });
            });
            tmpOption.legend.textStyle = textStyle;
        }
        if (tmpOption.legend && tmpOption.legend.data) {
            tmpOption.legend.data = tmpOption.legend.data.map(item => {
                if (typeof item === 'string') {
                    return {
                        name: item,
                        icon: 'circle'
                    };
                }
                if (typeof item === 'object') {
                    return {
                        ...item,
                        icon: 'circle'
                    };
                }
                return item;
            });
        }
    }
    return tmpOption;
};

const Echarts = React.forwardRef(({ option, legendExtra, ...rest }, ref) => (
    <ReactEcharts
        ref={ref}
        notMerge
        option={dealOption(option, legendExtra)}
        {...rest}
    />
));

Echarts.propTypes = {
    /**
     * legend 额外的数据：例如：[name => `66人`, name => ({ type: 'increment', value: '55%' })]
     * 注意：第二个是返回一个带有 type 和 value 属性的兑现
     * 如果需要返回自定义样式，请返回：{value: '66人', style: { fontSize: 18, color: '#000' }}
     */
    legendExtra: PropTypes.array
};

Echarts.defaultProps = {
    legendExtra: []
};

export default Echarts;
export { dealOption };
